<template>
	<view class="page-bg">

		<u-navbar :autoBack="true" :border="false" :placeholder="true">
		
			
			<view slot="center" class="fb c3 f16">
				订单详情
			</view>
		</u-navbar>
		<view class="container">
			<view class="top-bg f-s-b">
				<view class="cf ml20">
					<view class="f18 fb">
						等待到达
					</view>
					<view class="f14">
						剩余时间：39分钟
					</view>
				</view>
				<image class="mr20" src="../images/car.png" style="width: 58px;height: 42px;"></image>
			</view>

			<view class="content-bg p12 mt10">
				<view class="c3 fb f16 ">
					客户信息
				</view>
				<view class="divider-line mb10 mt10" />
				<view class="f-s-b">
					<image src="../../static/order/location-order.png" style="width: 24px;height: 24px;"></image>
					<view class="f1 ml20">
						<view class="fb f16 c3">
							李四 155****552
						</view>
						<view class="c6 f14 mt10">
							安徽省滁州市南谯区君临国际
						</view>
					</view>
					<image src="../../static/home/phone.svg" style="width: 20px;height: 20px;"></image>
				</view>
			</view>
			<view class="content-bg p12 mt10">
				<view class="c3 fb f16 ">
					回收信息
				</view>
				<view class="divider-line mb10 mt10" />
				<view class="f-s-b">
					<view class="c6 f14 mt10">
						回收废品：
					</view>
					<view class="fb f14 c3">
						塑料
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						物品估重：
					</view>
					<view class="fb f14 c3">
						15-20kg
					</view>
				</view>
			</view>

			<view class="content-bg p12 mt10">
				<view class="c3 fb f16 ">
					订单信息
				</view>
				<view class="divider-line mb10 mt10" />
				<view class="f-s-b">
					<view class="c6 f14 mt10">
						订单编号：
					</view>
					<view class="fb f14 c3">
						255487451855145
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						创建时间：
					</view>
					<view class="fb f14 c3">
						2023-06-07 09:30:29
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						接单时间：
					</view>
					<view class="fb f14 c3">
						2023-06-07 09:30:29
					</view>
				</view>
				<view class="f-s-b mt10">
					<view class="c6 f14 mt10">
						回收人员：
					</view>
					
					<view class="fb f14 c3">
						王大治
					</view>
				</view>
			</view>
			
			<view class="f" style="margin-top: 40px;">
				<view class="cancel-circle-btn f1" style="height: 50px;">
					取消
				</view>
				<view class="sure-circle-btn f1 ml20" style="height: 50px;">
					导航
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	
</script>

<style>
	.top-bg {
		height: 80px;
		background: #18C387;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.content-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}
	
</style>